<template>
  <el-main>
    <!--新增按钮 -->
    <el-form size="small">
      <el-form-item>
        <el-button type="primary" @click="addMenu" icon="el-icon-plus"
          >新增</el-button
        >
      </el-form-item>
      <!-- <i class="iconfont icon-jia"></i> -->
    </el-form>
    <!-- 表格数据 -->
    <el-table
      :height="tableHeight"
      :data="tableList"
      border
      stripe
      row-key="menuId"
      :tree-props="{ children: 'children' }"
      default-expand-all
      size="small"
    >
      <el-table-column prop="menuLabel" label="菜单名称"></el-table-column>
      <el-table-column prop="type" label="菜单类型">
        <template slot-scope="scope">
            <el-tag v-if="scope.row.type == '0'">目录</el-tag>
            <el-tag v-if="scope.row.type == '1'" type="success">菜单</el-tag>
            <el-tag v-if="scope.row.type == '2'" type="warning">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="menuLabel" label="菜单图标">
        <template slot-scope="scope">
            <i :class="scope.row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="路由名称"></el-table-column>
      <el-table-column prop="path" label="路由地址"></el-table-column>
      <el-table-column prop="url" label="组件路径"></el-table-column>
      <el-table-column prop="menuCode" label="权限字段"></el-table-column>
      <el-table-column label="操作"  align="center" width="200">
        <template slot-scope="scope">
            <el-button type="primary" size="small" icon="el-icon-edit" @click="editMenuBtn(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteMenuBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增或编辑弹窗 -->
    <sys-dialog
      :title="dialog.title"
      :width="dialog.width"
      :height="dialog.height"
      :visible="dialog.visible"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form
          style="margin-left: 40px"
          :model="addModel"
          ref="addFrom"
          :rules="rules"
          label-width="80px"
          :inline="true"
          size="normal"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="菜单类型" prop="type">
                <el-radio-group v-model="addModel.type">
                  <el-radio :label="'0'">目录</el-radio>
                  <el-radio :label="'1'">菜单</el-radio>
                  <el-radio :label="'2'">按钮</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="上级菜单" prop="parentName">
            <el-input
              v-model="addModel.parentName"
              placeholder="请选择上级菜单"
              size="small"
              @click.native="selectParentName"
            ></el-input>
          </el-form-item>
          <el-form-item label="菜单名称" prop="menuLabel">
            <el-input
              v-model="addModel.menuLabel"
              placeholder="请填写菜单名称"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="菜单图标">
            <el-input
              v-model="addModel.icon"
              placeholder="请选择菜单图标"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="路由名称"
            prop="name"
            v-if="addModel.type == '1'"
          >
            <el-input
              v-model="addModel.name"
              placeholder="请填写路由名称"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="路由地址"
            prop="path"
            v-if="addModel.type != '2'"
          >
            <el-input
              v-model="addModel.path"
              placeholder="请填写路由地址"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="组件路径" prop="url" v-if="addModel.type == '1'">
            <el-input
              v-model="addModel.url"
              placeholder="请填写组件路径"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="权限字段" prop="menuCode">
            <el-input
              v-model="addModel.menuCode"
              placeholder="请填写权限字段"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="权限备注">
            <el-input
              v-model="addModel.remark"
              placeholder="请填写权限备注"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="权限序号">
            <el-input
              v-model="addModel.orderNum"
              placeholder="请填写权限序号"
              size="small"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </sys-dialog>
    <!-- 选择上级菜单弹窗 -->
    <sys-dialog
      :title="parentDialog.title"
      :width="parentDialog.width"
      :height="parentDialog.height"
      :visible="parentDialog.visible"
      @onClose="onParentClose"
      @onConfirm="onParentConfirm"
    >
      <div slot="content">
        <el-tree
          ref="parentTree"
          :data="parentList"
          node-key="menuId"
          :props="defaultProps"
          empty-text="暂无数据"
          :show-checkbox="false"
          :highlight-current="true"
          @node-click="nodeSelect"
          default-expand-all
          expand-on-click-node="false"
        >
          <div slot-scope="{ node, data }">
            <!-- 如果没有下级，显示文件图标 -->
            <span v-if="data.children.length == 0">
              <i class="el-icon-document" style="margin-left: 3px"></i>
            </span>
            <!-- 有下级，判断是否展开 -->
            <span v-else @click.stop="openBtn(data)">
              <i
                v-if="data.open"
                class="iconfont icon-jia"
                style="margin-left: 3px"
              ></i>
              <i v-else class="iconfont icon-jian" style="margin-left: 3px"></i>
            </span>
            <span style="margin-left: 3px">{{ node.label }}</span>
          </div>
        </el-tree>
      </div>
    </sys-dialog>
  </el-main>
</template>

<script>
import {
  getMenuListApi,
  addMenuApi,
  getParentTreeApi,
  editMenuApi,
  deleteMenuApi
} from "@/api/menu";
import SysDialog from "@/components/system/SysDialog";
export default {
  components: {
    SysDialog,
  },
  data() {
    return {
        //表格高度
        tableHeight:0,
      //上级菜单树属性配置
      defaultProps: {
        children: "children",
        label: "menuLabel",
      },
      //上级菜单树数据
      parentList: [],
      //上级菜单弹窗属性
      parentDialog: {
        title: "选择上级菜单",
        width: 300,
        height: 450,
        visible: false,
      },
      //表单验证规则
      rules: {
        type: [
          {
            required: true,
            trigger: "change",
            message: "请选择菜单类型",
          },
        ],
        parentName: [
          {
            required: true,
            trigger: "change",
            message: "请选择上级菜单",
          },
        ],
        menuLabel: [
          {
            required: true,
            trigger: "change",
            message: "请填写菜单名称",
          },
        ],
        icon: [
          {
            required: true,
            trigger: "change",
            message: "请填写图标",
          },
        ],
        name: [
          {
            required: true,
            trigger: "change",
            message: "请填写路由名称",
          },
        ],
        path: [
          {
            required: true,
            trigger: "change",
            message: "请填写路由地址",
          },
        ],
        url: [
          {
            required: true,
            trigger: "change",
            message: "请填写组件路径",
          },
        ],
        menuCode: [
          {
            required: true,
            trigger: "change",
            message: "请填写权限字段",
          },
        ],
      },
      //新增或编辑绑定的数据
      addModel: {
        editType: "", //标识 0：新增，1：编辑
        menuId: "",
        parentId: "",
        menuLabel: "",
        menuCode: "",
        name: "",
        path: "",
        url: "",
        type: "",
        icon: "",
        remark: "",
        parentName: "",
        orderNum: "",
      },
      //新增或编辑弹窗属性
      dialog: {
        title: "",
        width: 700,
        height: 380,
        visible: false,
      },
      //表格数据
      tableList: [],
      selectNode: {
        menuId: "",
        menuLabel: "",
      },
    };
  },
  created() {
    this.getMenuList();
  },
  mounted() {
    //设置表格高度
    this.$nextTick(()=>{
        this.tableHeight = window.innerHeight - 180;
    })
  },
  methods: {
    //删除按钮
   async deleteMenuBtn(row){
        //console.log(row);
        let confirm = await this.$myconfirm('确认要删除吗?');
        if(confirm){
            let res = await deleteMenuApi({menuId:row.menuId});
            if (res && res.code == 200) {
            //刷新列表，提示信息
            this.getMenuList();
            this.$message.success(res.msg);
          }
        }
    },
    //编辑按钮
    editMenuBtn(row){
        //console.log(row);
        //清空表单
        this.$resetForm('addForm',this.addModel);
        //把当前编辑的数据复制到表单中
        this.$objCoppy(row,this.addModel);
        //设置编辑标识
        this.addModel.editType = '1';
        //设置弹窗属性
        this.dialog.title='编辑菜单';
        this.dialog.visible = true;
    },
    //上级菜单加号减号点击事件
    openBtn(data){
        data.open = !data.open;
        this.$refs.parentTree.store.nodesMap[data.menuId].expanded = !data.open;
    },
    //上级节点点击事件
    nodeSelect(node) {
      //console.log(node);
      this.selectNode.menuId = node.menuId;
      this.selectNode.menuLabel = node.menuLabel;
    },

    //选择上级菜单点击事件
    async selectParentName() {
      //获取上级菜单部门树的数据
      let res = await getParentTreeApi();
      //console.log(res);
      if (res && res.code == 200) {
        this.parentList = res.data;
      }
      this.parentDialog.visible = true;
    },
    //上级菜单弹窗确认
    onParentConfirm() {
      this.addModel.parentId = this.selectNode.menuId;
      this.addModel.parentName = this.selectNode.menuLabel;
      this.parentDialog.visible = false;
      //console.log(this.addModel);
    },
    //上级菜单弹窗关闭
    onParentClose() {
      this.parentDialog.visible = false;
    },
    //新增或编辑确认事件
    onConfirm() {
      this.$refs.addFrom.validate(async (valid) => {
        if (valid) {
          let res = null;
          if (this.addModel.editType == "0") {
            //新增
            res = await addMenuApi(this.addModel);
          } else {
            //编辑
            res = await editMenuApi(this.addModel);
          }
          if (res && res.code == 200) {
            //刷新列表，关闭弹窗，提示信息
            this.getMenuList();
            this.dialog.visible = false;
            this.$message.success(res.msg);
          }
        }
      });
    },
    //弹窗关闭
    onClose() {
      this.dialog.visible = false;
    },
    //新增按钮
    addMenu() {
      //清空表单数据
      this.$resetForm("addForm", this.addModel);
      this.dialog.title = "新增菜单";
      this.dialog.visible = true;
      this.addModel.editType = "0";
    },
    //查询列表
    async getMenuList() {
      let res = await getMenuListApi();
      if (res && res.code == 200) {
        this.tableList = res.data;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tree {
  // 将每一行的设置为相对定位 方便后面before after 使用绝对定位来固定位置
  .el-tree-node {
    position: relative;
    padding-left: 10px;
  }
  // 子集像右偏移 给数线留出距离
  .el-tree-node__children {
    padding-left: 20px;
  }
  //这是竖线
  .el-tree-node :last-child:before {
    height: 40px;
  }
  .el-tree > .el-tree-node:before {
    border-left: none;
  }
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  //这自定义的线 的公共部分
  .el-tree-node:before,
  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .tree :first-child .el-tree-node:before {
    border-left: none;
  }
  // 竖线
  .el-tree-node:before {
    border-left: 1px dotted #d9d9d9;
    bottom: 0px;
    height: 100%;
    top: -25px;
    width: 1px;
  }
  //横线
  .el-tree-node:after {
    border-top: 1px dotted #d9d9d9;
    height: 20px;
    top: 14px;
    width: 24px;
  }
  .el-tree-node__expand-icon.is-leaf {
    width: 8px;
  }
  //去掉elementui自带的展开按钮  一个向下的按钮,打开时向右
  .el-tree-node__content > .el-tree-node__expand-icon {
    display: none;
  }
  //每一行的高度
  .el-tree-node__content {
    line-height: 30px;
    height: 30px;
    padding-left: 10px !important;
  }
}
//去掉最上级的before  after 即是去电最上层的连接线
::v-deep .el-tree > div {
  &::before {
    display: none;
  }
  &::after {
    display: none;
  }
}
</style>